JavaScript中的运算符个人分享

运算符

加减乘除法运算符

1. 加法运算符:

• 如果字符串进行加法计算 - 叫拼串
• 加法遇到字符串都是连接而不是加法运算
• 如果boolean类型进行加法计算时 - 加法运算自动将布尔类型转换为数字值在进行加法
• 注意:操作变量中如果不存在string类型的话 -> 执行的是加法计算

示例代码:

var num = 100;
var str1 = '一花一世界';
var str2 = '200';
var boo = true;

var result1 = num + 300;
console.log(result1);// 调用结果为 400

// 如果字符串进行加法计算 -> 字符串连接运算符(拼串)
var result2 = str1 + 300;
console.log(result2);// 调用结果为 一花一世界300
console.log(typeof result2);// 调用结果为 string

var result3 = str2 + 300;
console.log(result3);// 调用结果为 200300
// 如果布尔类型进行加法计算 -> 将布尔类型转换为数字值，再进行加法计算
var result4 = boo + 300;
console.log(result4);// 调用结果为 301

---

2.减法运算符

• 仅局限于数学计算(数字值)
• 如果操作变量的类型不是number(数字)类型那它会先将当前数据类型转换为number(数字)类型
• 备注:减法一定是数字减法

示例代码:

var result5 = num - 100;
console.log(result5);// 调用结果为 0
// 如果字符串进行减法计算的话 -> 将字符串类型转换为数字值，再进行减法计算
var result6 = str1 - 100;
console.log(result6);// 调用结果为 NaN

var result7 = str2 - 100;
console.log(result7);// 调用结果为 100
// 如果布尔类型进行减法计算 -> 将布尔类型转换为数字值，再进行减法计算
var result8 = boo - 100;
console.log(result8);// 调用结果为 -99

• 特殊情况:数字减NaN和字符串输出结果都得出NaN

示例代码:

console.log(num - NaN);// NaN
console.log(num - '我是谁');// NaN

---

3.乘法和除法运算符和减法运算符一样

• 注意: 除了加法运算符之外，所有算数运算符都是执行数学计算

---

求余运算符 - 就是获取除法计算之后的余数

• 特殊情况: 求余的结果是正数还是负数与第一个操作的数有关,(与第二个操作的数无关)

示例代码:

console.log(100 % 3);// 1
console.log(8 % 4);// 0
// 求余的结果是正数还是负数，与第一个操作数是正数或负数有关(与第二个操作数无关)
console.log(100 % -3);// 1
console.log(8 % -4);// 0

console.log(-100 % 3);// -1
console.log(-8 % 4);// 0

console.log(-100 % -3);// -1
// 与减法的情况保持一致
console.log('卧龙学苑' % 2);// NaN

---

自增运算符 - 就是给自己增加 - 操作的是当前变量的值,每自增一次(+1)

• 前置自增运算符 - ++变量名

  • 先自增，再赋值

• 后置自增运算符 - 变量名++

  • 先赋值，再自增

示例代码:

var num = 10;
console.log(num);// 10

// 前置自增
var result1 = ++num;
console.log(result1);// 11
console.log(num);// 11

// 后置自增
var result = num++;
console.log(result);// 10
console.log(num);// 11

---

运算符的优先级别

1. 先计算优先级别高的运算符
2. 运算符的级别相同，从左至右的计算

• 运算符中优先级别最高的是"()"

  • 优先计算的表达式利用"()"将其包裹起来

示例代码:

console.log(100 + 200 - 150 * 3);// -150
console.log(100 + 200 % 3);// 102
console.log(2 * 200 % 3);// 1

var num = 10;
console.log(5 + ++num);// 16

---

比较运算符

大于小于比较运算符

示例代码:

// 1.number类型
console.log(10 > 11);// false
console.log(11 > 10);// true
console.log(10 >= 10);// true
// 2.boolean类型 - 将boolean类型转换为number类型
console.log(true > false);// true
console.log(true > 0);// true
/*
    3.string类型 - a.英文；b.中文
      * 英文或中文 -> 将文本转换成 Unicode 码 - 对应具有数字值
      * 英文单词 -> 从左至右的依次比较字母 Unicode 码的大小
  */
console.log('a' < 'b');// true
console.log('a' > 'A');// true
console.log('abc' > 'cba');// false
console.log('abc' > 'acd');// false

---

相等和不相等与全等和不全等比较运算符

1.相等和不相等:

• 相等比较运算符

  • 与赋值运算符的区别
  • 赋值运算符(=)
  • 相等比较运算符(==)

• 不等比较运算符

  • 符号是"!="
  • 不是"<>"

示例代码:

// 1.number类型
console.log(10 == 10);// true
console.log(10 == 11);// false
// 2.boolean类型
console.log(true == true);// true
console.log(true == false);// false

console.log(true == 1);// true

// 3.string类型
console.log('a' == 'a');// true
console.log('a' == 'b');// false
// 只比较值，而不比较类型
console.log('100' == 100);// true

---

2.等和不相等与全等

• 完全相等 : 是三个等于号 (===)
• 完全不相等 : 是以个叹号两个等号 ( !== )
• 完全相等就是说不只是值相等而且类型也必须相等
• 反之完全不相等道理一样必须是所有都不一样才可以(比如:值和类型)

示例代码:

// 全等 - 不仅比较值，还比较类型
console.log(10 === 10);// true

console.log('10' === 10);// false
console.log('10' == 10);// true

// 不全等
console.log(11 !== 10);// true

console.log('10' !== 10);// true

• 备注:

  • 相等和不相等与全等和不全等的区别

    • 相等就是只要值是一样的就行
    • 全等则是值和类型都要一样才行

---

isNaN()函数

• 作用 - 判断当前值是否为 NaN

  • true - 表示当前值是 NaN(不是一个数字值)
  • false - 表示当前值不是 NaN(不是一个数字值)
• 注意: 全等和相等都不好使

示例代码:

console.log(isNaN(100));// false
console.log(isNaN(Number('一花一世界')));// true

---

isFinite()函数

• 作用 - 判断当前值是否为无穷大

• 注意:boolean类型的值在isFinite()函数中表示的意思是:

  • 表示当前值是无穷大
  • true - 表示当前值是有限数值

var result = 100/0;
console.log(result);// Infinity - 表示无穷大的意思
console.log(isFinite(result));// false

---

逻辑运算符

逻辑与运算符

• 总结:

  • 逻辑与相当于生活中说的'并且'的意思
  • 如果两个变量的布尔值都为false的话，结果为左边变量的值
  • 如果两个变量的布尔值，一个是true一个是false的话，结果为false的变量值
  • 如果两个变量的布尔值都为true的话，结果为右边变量的值
  • 注意:计算的结果无论是什么类型，转换为布尔类型时结果只能是true或false

代码示例图:

console.log(true && true);// 调用结果为 true
console.log(true && false);// 调用结果为 false
console.log(false && true);// 调用结果为 false
console.log(false && false);// 调用结果为 false
/*
    将逻辑与运算符的两个操作数，转换为布尔类型
    * 当左边的操作数为true时，结果为右边操作数的值
    * 当左边的操作数为false时，结果为左边操作数的值
 */
console.log(100 && 1);// 调用结果为 1
console.log(1 && 0);// 调用结果为 0
console.log(0 && 1);// 调用结果为 0
console.log(0 && 0);// 调用结果为 0

console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);

console.log('一花一世界' && '一花一世界');// 调用结果为 一花一世界
console.log('一花一世界' && '');// 调用结果为 ''
console.log('' && '一花一世界');// 调用结果为 ''
console.log('' && '');// ''

/*
    如果两个变量是字符串和数字类型时则取右边的值
 */
console.log('一花一世界' && 1);// 调用结果为 1
console.log(1 && '一花一世界');// 调用结果为 一花一世界
console.log(false && 0);// 调用结果为 false

---

逻辑或运算符

• 将逻辑与运算符的两个操作数，转换为布尔类型

  • 逻辑或相当于生活中说的'或者'的意思
  • 如果两个变量的布尔值都为false的话，结果为右边变量的值
  • 如果两个变量的布尔值都为true的话，结果为左边变量的值
  • 当左边的操作数为true时，结果为左边操作数的值
  • 当左边的操作数为false时，结果为右边操作数的值

示例代码:

console.log(true || true);// 调用结果为 true
console.log(true || false);// 调用结果为 true
console.log(false || true);// 调用结果为 true
console.log(false || false);// 调用结果为 false

console.log(100 || 1);// 调用结果为 100
console.log(1 || 0);// 调用结果为 1
console.log(0 || 1);// 调用结果为 1
console.log(0 || 0);// 调用结果为 0

console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);

console.log('一花一世界' || '一花一世界');// 调用结果为 一花一世界
console.log('一花一世界' || '');// 调用结果为 一花一世界
console.log('' || '一花一世界');// 调用结果为 一花一世界
console.log('' || '');// 调用结果为 ''

---

逻辑非运算符

• 逻辑非 - 语法 : (!)

  • 逻辑非相当于生活中说的'不是'的意思
  • 逻辑非就是取相反
  • 如果当前值为true(对的)得到结果就是false(错的)
• 备注:null,0,NaN,空字符串 ("") 和undefined都是false(错的)

---

赋值扩展运算符

• 赋值扩展运算符 - 就是简写形式

  • 优点:

    1. 代码量减少
    2. 性能更好

示例代码对比:

var b = 10, c = 20;
var a = b + c;
console.log(a);// 30
 b = b + c;

b += c;
console.log(b);// 30

---

条件运算符

• 条件运算符的语法格式

  • 条件表达式 ? 为true的结果 : 为false的结果
  • 问号 (?)后是为true的结果 - 可以是任何类型 - 比如: 字符串,布尔值,数字值等等
  • 冒号 (:)后是为false的结果 - 可以是任何类型 - 比如: 字符串,布尔值,数字值等等

示例代码:

var result = 10 > 20 ? '对' : '错';
console.log(result);// 调用结果为 错

var score = 95;
score > 90 ? console.log('帅') : console.log('丑');// 调用结果为 帅

---

嵌套条件运算符

• 嵌套条件运算符

  • 优点 - 扩展了条件运算符本身的计算能力

  • 缺点

    1. 可读性比较差
    2. 性能随着嵌套的层级越多越差
• 建议 - 最多不要超过三层嵌套

示例代码:

var result = score > 90 ? '很帅' : score > 80 ? '一般帅' :  '很丑';
console.log(result);